<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>树洞界面</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/register.css"/>
    <style>
        .password{
            position: relative;
        }
        .password em{
            position: absolute;
            display: inline-block;
            height: 100%;
            right: 0%;
            top: -34%;
        }
        .password em i{
            background: url("../img/eye.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
            position: absolute;
            right: 0%;
            width: 0.6rem;
            height: 100%;
        }
        .login_Button{
            display: block;
            margin-top: 0.3rem;
            width: 80%;
            height: 0.8rem;
            line-height:0.28rem;
            position: relative;
            left:10%;
            padding:0.2rem 0;
            background-color: rgba(0, 0, 0, 0);
            border:1px solid #fff;
            border-radius:15px;
            color:#fff;
            font-size: 0.34rem;
        }
    </style>
</head>
<body>
<div class="layer">
    <div class="box">
        <div class="username">
            <input type="text"  id="phone" placeholder="手机号码"/>
        </div>
        <div class="Verification"><input type="text" placeholder="输入短信验证码" id="phone_num"/> <span class="gain" onclick="getcode()">获取验证码</span></div>
        <div class="password"><input type="password" id="pwd" placeholder="设置密码"/><em><i class="eye"></i></em> </div>
        <button class="register">
            完成注册
        </button>
        <button class="login_Button" onclick="window.location.href='login.html'">登录</button>
    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script>
    //添加小眼睛 和 叉号
    //点击小眼睛 改变input的状态
    var flag=true;
    $(".eye").click(function(){
        if(flag){
            $(".password input[type='password']").attr("type","text");
            $(this).css("background-image","url(../img/hidden_password.png)");
            flag=false;
        }else{
            $(".password input[type='text']").attr("type","password");
            $(this).css("background-image","url(../img/eye.png)");
            flag=true;
        }
    });
    var flag = true;
    function getcode(){
        if(!flag){
            return;
        }
        var mobile = $('#phone').val();
        if(!checkTelNum(mobile)){
            alert('手机号码不正确');
            $('#phone').val("");
            return false;
        }
       // var uuid=Math.random().toString(36).substr(2);
        //var obj = {mobile:mobile,uuid:uuid,type:1};
        flag = false;
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            url: "http://192.168.1.126/student/doCode",
            data: {
                mobilePhone:mobile
            },
            datType: 'json',
            success: function (data){
                //alert(data);
                console.log(data);
               console.log(data.code);

                window.localStorage.setItem("code",JSON.stringify(data.code));
            }
        })
    }
    function register(){
        var phonenum = $('#phone').val();
        var pwd = $('#pwd').val();
        var safecode = $('#phone_num').val();
        var parms = {};

        if(isNotBlank(phonenum)){
            if  (!checkTelNum(phonenum)) {
                alert('手机号码格式不正确，请您重新输入！');
                $("input").val("");
                return false;
            }
            else {
                parms.mobilePhone = phonenum;
            }
        }
        else{
            alert('手机号/用户名不能为空');
            $("input").val("");
            return false
        }

        if (isNotBlank(pwd)) {
            parms.password = pwd;
        } else {
            alert('密码不能为空');
            return false;
        }
        /*if (isNotBlank(safecode)) {
            parms.captcha = safecode;
        } else {
            alert('短信验证码不能为空');
            $('#phone_num').val("");
            return false;
        }*/
        if (!isNotBlank(safecode)) {
            alert('短信验证码不能为空');
            $('#phone_num').val("");
            return false;
        }
        //验证短信验证码是否正确；

        if(safecode!==localStorage.getItem("code").replace(/\"/g,"")){
            alert("短信验证码不正确");
            $(".gain").val("");
            return false;
        }
        //parms.uuid=localStorage.getItem("uuid").replace(/\"/g,"");
        // console.log(JSON.stringify(parms));
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            //contentType:'application/json;charset=UTF-8',
            url: baseUrl+"/student/register",
            data: parms,
            dataType: 'json',
            success: function (data){
                console.log(data);
                if(data.code=="success"){
                    localStorage.removeItem("code");
                    window.location.href="./addData.html";
                }
                if(data.comment=="账号已存在"){
                    alert(data.comment);
                    $("input").val("");
                    return false;
                }
            }
        })
    }
    //验证手机号
    function checkTelNum(telNum){
        if(!/^1[0-9]{10}$/.test(telNum)){
            return false;
        }
        return true;
    }
    //验证不为空
    function isNotBlank(data) {
        return (data == "" || typeof(data)  == "undefined"|| data == null ) ? false : true;
    }
    //倒计时效果
    $(".gain").click(function(){
        var time=60;
        $(this).text(time+ "S");
        var timer= setInterval(function(){
            time--;
            $(".gain").text(time+ "S");
            if(time<0){
                clearInterval(timer);
                $(".gain").text("重新发送");
                $(".Verification input").val("");
                time=60;
            }
        },1000)
    })

    $(".register").click(function(){
        register();
    })

</script>
</body>
</html>